<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- DatePicker(jQuery UI) -->
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="resources/css/office/o_schedule.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- FullCalendar(jQuery API) -->
<link href='resources/css/fullcalendar/fullcalendar.css'
	rel='stylesheet' type="text/style" />
<script src='resources/js/fullcalendar/fullcalendar.js'></script>
<script>
	var Dept_id;
	function showcal() {
		//alert($(".seldept").val());
		Dept_id = $(".seldept").val();
		//alert(Dept_id);
		$("#calendar").empty();
		$('#calendar').fullCalendar(
				{
					height : 550,
					editable : true,
					events : "deptschedule.do?url=" + Dept_id,
					//events: "deptschedule.do",
					eventDrop : function(event, delta) {
						alert(event.title + ' was moved ' + delta + ' days\n'
								+ '(should probably update your database)');
					},
					loading : function(bool) {
						if (bool)
							$('#loading').show();
						else
							$('#loading').hide();
					},
					eventClick : function() {
						var testaa = $(this).text();
						//alert(testaa);
					}
				});
		$.ajax({
			url : 'selectdoctor.do',
			data : 'dept_id=' + Dept_id,
			dataType : "json",
			success : function(data) {
				//alert("dd");
				$("#doctors").empty();
				var opt = "<tr><th>진료과</th><th>의사ID</th><th>의사이름</th></tr>";
				$("#doctors").html(opt);
				for (i = 0; i < data.doctorlist.length; i++) {
					var opt2 = "<tr>";
					opt2 += "<td class='width80px'><input type='hidden' value='"+data.doctorlist[i].deptname+"'>"+data.doctorlist[i].deptname+"</td>";
					opt2 += "<td><input type='text' value='"+data.doctorlist[i].doctor_id+"' class='doctorSelect' name='doctorSelect' readonly></td>";
					opt2 += "<td><input type='hidden' value='"+data.doctorlist[i].name+"'>"+data.doctorlist[i].name+"</td>";
					opt2 += "</tr>";
					$("#doctors").append(opt2);
				}
				$("input:text[name=doctorSelect]").click(function() {
					var doctorId = $(this).attr('value');
					$('input:text[name=DOCTOR_ID]').val(doctorId);
					$('input:text[name=doctor_id]').val(doctorId);
				});
			}
		});
	}

	// FullCalnedar
	$(document).ready(function(){
		$(".seldept").focus();
		$(".datepicker").datepicker({
			showMonthAfterYear : true,
			minDate : '1d',
			yearSuffix : '년',
			monthNames : [ '1월', '2월', '3월', '4월',
					'5월', '6월', '7월', '8월', '9월',
					'10월', '11월', '12월' ],
			monthNamesShort : [ '1월', '2월', '3월', '4월',
					'5월', '6월', '7월', '8월', '9월',
					'10월', '11월', '12월' ],
			dayNamesMin : [ '일', '월', '화', '수', '목',
					'금', '토' ],
			dateFormat : 'yy-mm-dd'
		});
		// DatePicker
		$("#deldate").bind("change", fn_showtime);
	});

	function fn_showtime() {
		$(".select_time2").empty();
		//alert("aa");\
		var sdate = $("#deldate").val();
		//alert(sdate);
		var doctor_id = $("#doctor_id").val();
		//alert(doctor_id);
		$.ajax({
			url : 'selecttime.do',
			data : 'doctor_id=' + doctor_id + '&sdate=' + sdate,
			dataType : "json",
			success : function(data) {
				//alert(data.timelist[0].res_time);
				for (var i = 0; i < data.timelist.length; i++) {
					//alert(data.timelist[i].res_time);
					var res_time = "";
					res_time += "<option value='"+data.timelist[i].res_time+"'>"
							+ data.timelist[i].res_time + "</option>";
					$(".select_time2").append(res_time);
				}
			}
		});
	}

	function delschedule() {
		var doctor_id = $(".doctorid").val();
		var res_time = $(".select_time2").val();
		$.ajax({
			url : 'delschedule.do',
			data : 'DOCTOR_ID=' + doctor_id + '&res_time=' + res_time,
			dataType : "json",
			success : function(data) {
				if (data === "success") {
					alert("스케쥴이 삭제되었습니다.");
					setTimeout(showcal(), 1);
				} else if (data === "fail") {
					alert("예약이 존재하여 삭제할수 없습니다.");
				}
			}

		});
	}

	$(function() {
		$(".select_time").change(function() {
			var restime = $(".select_time").val();
			var doctor_id = $(".doctorid1").val();
			var sdate = $('.datepicker').val();
			//alert(sdate);
			$.ajax({
				url : "compareres.do",
				data : "res_time=" + restime + "&doctor_id=" + doctor_id+"&sdate="+sdate,
				success : function(data) {
					if (data == 'no') {
						alert("이미 스케줄이 잡힌 시간입니다");
					}
				},
				error : function(data) {
					alert("스케줄 가능 여부 판단 실패");
				}
			});
		});
	});

	function addschedule() {
		var sdate = $('.datepicker').val();
		var doctor_id = $('.doctorid1').val();
		var res_time = $('.select_time').val();
		//alert(sdate);
		///alert(doctor_id);
		//alert(res_time);
		$.ajax({
			url : 'addschedule.do',
			data : 'DOCTOR_ID=' + doctor_id + '&res_time=' + res_time
					+ '&sdate=' + sdate,
			dataType : "json",
			success : function(data) {
				if (data === "success") {
					alert("스케쥴이 추가되었습니다.");
					setTimeout(showcal(), 1);
				} else if (data === "fail") {
					alert("스케쥴을 추가할수가 없습니다.");
				}
			}

		});
	}
</script>

	<!-- FullCalendar body -->
	<div class="cal_box">
		<div class="calendar_body">
			<div id="calendar"></div>
		</div>
	</div>
	<!-- Input/Output Form -->
	<div id="systembaseside">
		<div id="sub_sys">
			<select class="seldept">
				<option value="Dep015">내과</option>
				<option value="Dep016">외과</option>
				<option value="Dep017">흉부외과</option>
				<option value="Dep018">정형외과</option>
				<option value="Dep019">성형외과</option>
				<option value="Dep020">비뇨기과</option>
				<option value="Dep021">가정의학과</option>
				<option value="Dep022">재활의학과</option>
				<option value="Dep023">정신과</option>
				<option value="Dep024">안과</option>
				<option value="Dep025">산부인과</option>
				<option value="Dep026">피부과</option>
				<option value="Dep027">진단검사의학과</option>
				<option value="Dep028">장기이식센터</option>
				<option value="Dep029">신경외과</option>
				<option value="Dep034">신경과</option>
				<option value="Dep035">이비인후과</option>
			</select><button type="button" onclick="showcal()">검색</button>
		</div>
		<form action="#">
			<table id="add">
				<tr>
					<td colspan="2">스케쥴 추가하기</td>
				</tr>
				<tr>
					<td>DOCTOR</td>
					<td><input type="text" name="doctor_id" readonly
						class='doctorid1'></td>
				</tr>
				<tr>
					<td>DATE</td>
					<td><input type="text" class="datepicker" name="sdate" id='sdatelist'
						readonly></td>
				</tr>
				<tr>
					<td>TIME</td>
					<td><select id="res_time" name="res_time" class="select_time">
							<option selected>- 시간선택 -</option>
							<c:forEach var="h" begin="11" end="18" step="1">
								<c:forEach var="m" begin="10" end="55" step="5">
									<option value="${h}:${m}">${h}:${m}</option>
								</c:forEach>
							</c:forEach>
					</select></td>
				</tr>
				<tr>
					<td colspan="2"><button type="button" onclick="addschedule();">추가</button></td>
				</tr>
			</table>
		</form>
		<table id="del">
			<tr>
				<td colspan="2">스케쥴 삭제하기</td>
			</tr>
			<tr>
				<td>ID</td>
				<td><input type="text" name="doctor_id" id="doctor_id"
					class="doctorid" readonly></td>
			</tr>
			<tr>
				<td>date</td>
				<td><input type="text" class="datepicker" name="date"
					id="deldate" readonly></td>
			</tr>
			<tr>
				<td>TIME</td>
				<td><select id="res_time" name="res_time" class="select_time2">
				</select></td>
			</tr>
			<tr>
				<td colspan="2"><button type="button" onclick="delschedule();">삭제</button></td>
			</tr>
		</table>
		<table id="doctors">

		</table>
		<form action="redirect.do" name="redirect" id="redirect"></form>
	</div>
